${template "main_header.html"}

<div id="app" class="page-content" :style="!urlobj.dialogstate ? 'margin-top:60px;':'margin-top:10px;'">
	<tab-tag v-if="!urlobj.dialogstate"></tab-tag>
	
	<div style="margin:0 15px 15px 15px;">
		<el-card shadow="never" style="min-height:650px;">
			<div class="btn-group" style="margin-top:10px;margin-bottom:10px;">
			<div>
				<el-button v-for="item in button_group" :key="item.access" v-if="checkPermission(item.access,'','1',[1])" :disabled="$data[item.disabled]" :type="item.color" size="mini" :icon="item.icon" @click="fn(item.clickname)">
					<span v-if="item.batch" v-text="$data['batchUpdateStatus']?'批量保存':'批量编辑'"></span>
					<span v-else v-text="item.name"></span>
				</el-button>
			</div>
			<div><table-tool :search_visible.sync="search_visible" :expand_status="true" :expand="expand" @toggle="toggleRowExpansion" @refesh_list="index"></table-tool></div>
			</div>
			<el-table :row-class-name="rowClass" @selection-change="selection"  @row-click="handleRowClick" :tree-props="{children: 'children'}"  :default-expand-all="expand" row-key="id"  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading"  ref="multipleTable" border class="eltable" :data="list"  style="width: 100%">
			<el-table-column align="center" type="selection" width="42"></el-table-column>
			<el-table-column align="center" type = '' property="id" label="编号" show-overflow-tooltip width="70">
			</el-table-column>
			<el-table-column align="left"  property="title" label="节点名称" show-overflow-tooltip width="">
			</el-table-column>
			<el-table-column align="center"  property="type" label="类型" show-overflow-tooltip width="100">
				<template slot-scope="scope">
					<el-tag type="primary" v-if="scope.row.type == '1'" size="mini" effect="dark">菜单</el-tag>
					<el-tag type="warning" v-if="scope.row.type == '2'" size="mini" effect="dark">方法</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="left"  property="path" label="节点路径" show-overflow-tooltip width="">
			</el-table-column>
			<el-table-column align="center"  property="status" label="状态" show-overflow-tooltip width="90">
				<template slot-scope="scope">
					<el-switch @change="updateExt(scope.row,'status')" :active-value="1" :inactive-value="0" v-model="scope.row.status"></el-switch>
				</template>
			</el-table-column>
			<el-table-column align="center"  property="icon" label="图标" show-overflow-tooltip width="">
			</el-table-column>
			<el-table-column align="center"  property="sort" label="排序" show-overflow-tooltip width="90">
				<template class="sort" slot-scope="scope">
					<el-input @blur.stop="updateExt(scope.row,'sort')"  size="mini" placeholder="排序" v-model="scope.row.sort"></el-input>
				</template>
			</el-table-column>
			<el-table-column :fixed="ismobile()?false:'right'" label="操作" align="center" width="180">
				<template slot-scope="scope">
					<div v-if="scope.row.id">
						<el-button v-if="checkPermission('/admin/Node/update.html','','1',[1])" size="mini" icon="el-icon-edit" type="primary" @click="update(scope.row)" >修改</el-button>
						<el-button v-if="checkPermission('/admin/Node/delete.html','','1',[1])" size="mini" icon="el-icon-delete" type="danger" @click="del(scope.row)" >删除</el-button>
					</div>
				</template>
			</el-table-column>
			</el-table>
			<Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
		</el-card>

		<!--添加-->
		<Add :show.sync="dialog.addDialogStatus" size="small" @refesh_list="index"></Add>
		<!--修改-->
		<Update :info="updateInfo" :show.sync="dialog.updateDialogStatus" size="small" @refesh_list="index"></Update>

	</div>

</div>
 
<script src="/assets/js/app.js"></script>
<script src="/assets/libs/treeselect/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet" href="/assets/libs/treeselect/vue-treeselect.min.css">
<script src="/assets/admin/node/add.js?v=3034"></script>
<script src="/assets/admin/node/update.js?v=5774"></script>
<script>
new Vue({
	el: '#app',
	components:{
		'treeselect':VueTreeselect.Treeselect,
	},
	data: function() {
		return {
			dialog: {
				addDialogStatus : false,
				updateDialogStatus : false,
			},
			searchData:{},
			button_group:[
				{name:'添加',color:'success',access:'/admin/Node/add.html',icon:'el-icon-plus',disabled:'',clickname:'add'},
				{name:'修改',color:'primary',access:'/admin/Node/update.html',icon:'el-icon-edit',disabled:'single',clickname:'update'},
				{name:'删除',color:'danger',access:'/admin/Node/delete.html',icon:'el-icon-delete',disabled:'multiple',clickname:'del'},
			],
			loading: false,
			page_data: {
				limit: 200,
				page: 1,
				total:20,
			},
			ids: [],
			single:true,
			multiple:true,
			search_visible:true,
			expand:true,
			list: [],
			updateInfo:{},
		}
	},
	methods:{
		index(){
			let param = {limit:this.page_data.limit,page:this.page_data.page}
			Object.assign(param, this.searchData)
			this.loading = true
			axios.post('/admin/node/index.html',param).then(res => {
				if(res.data.status == 200){
					this.list = res.data.data.data
					this.page_data.total = res.data.data.total
					this.loading = false
				}else{
					this.$message.error(res.data.msg);
				}
			})
		},
		updateExt(row,field){
			if(row.id){
				axios.post('/admin/node/updateExt',{id:row.id,[field]:row[field]}).then(res => {
					if(res.data.status == 200){
						this.$message({message: res.data.msg, type: 'success'})
					}else{
						this.$message.error(res.data.msg)
					}
				})
			}
		},
		add(){
			this.dialog.addDialogStatus = true
		},
		update(row){
			let id = row.id ? row.id : this.ids.join(',')
			axios.post('/admin/node/getUpdateInfo',{id:id}).then(res => {
				if(res.data.status == 200){
					this.dialog.updateDialogStatus = true
					this.updateInfo = res.data.data
				}else{
					this.$message.error(res.data.msg)
				}
			})
		},
		del(row){
			this.$confirm('确定操作吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let ids = row.id ? row.id : this.ids.join(',')
				axios.post('/admin/node/delete',{id:ids}).then(res => {
					if(res.data.status == 200){
						this.$message({message: res.data.msg, type: 'success'})
						this.index()
					}else{
						this.$message.error(res.data.msg)
					}
				})
			}).catch(() => {})
		},
		selection(selection) {
			this.ids = selection.map(item => item.id)
			this.single = selection.length != 1
			this.multiple = !selection.length
		},
		handleRowClick(row, rowIndex,event){
			if(event.target.className !== 'el-input__inner'){
				this.$refs.multipleTable.toggleRowSelection(row)
			}
		},
		rowClass ({ row, rowIndex }) {
			for(let i=0;i<this.ids.length;i++) {
				if (row.id === this.ids[i]) {
					return 'rowLight'
				}
			}
		},
		toggleRowExpansion(){
			this.expand = !this.expand
			this.list.forEach(item=>{
				this.$refs.multipleTable.toggleRowExpansion(item,this.expand)
			})
		},
		/** 转换菜单数据结构 */
		normalizer(node) {
			if (node.children && !node.children.length) {
				delete node.children
			}
			return {
				id: node.val,
				label: node.key,
				children: node.children
			}
		},
		fn(method){
			this[method](this.ids)
		},
	},
	mounted(){
		this.index()
	},
})
</script>
${template "main_footer.html"}
